<template>
    <div class="jobpost">
        <div>
            <h3>发布职位</h3>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="职位" prop="jobname">
                    <el-input placeholder="职位" v-model="ruleForm.jobname" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="薪资" prop="jobpay">
                    <el-select v-model="ruleForm.jobpay" clearable placeholder="请选择" style="width: 200px;">
                        <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工作地点" prop="jobaddress">
                    <el-select v-model="ruleForm.jobaddress" placeholder="选择地址" style="width: 200px;">
                        <el-option-group
                                v-for="group in options2"
                                :key="group.label"
                                :label="group.label">
                            <el-option
                                    v-for="item in group.options2"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item label="学历" prop="jobedu">
                    <el-select v-model="ruleForm.jobedu" clearable placeholder="请选择" style="width: 200px;">
                        <el-option
                                v-for="item in options3"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="经验" prop="jobexpr">
                    <el-select v-model="ruleForm.jobexpr" clearable placeholder="请选择" style="width: 200px;">
                        <el-option
                                v-for="item in options4"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="行业" prop="jobindustry">
                    <el-cascader v-model="ruleForm.jobindustry" style="width: 200px"  placeholder="请选择"
                                 :options="options5"
                                 filterable
                                 clearable
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="公司名称" prop="jobcompany">
                    <el-input placeholder="公司名称" v-model="ruleForm.jobcompany" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="职位描述" prop="jobdetail">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 6}"
                            placeholder="请输入内容"
                            v-model="ruleForm.jobdetail">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">发布</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'jobpost',
        data() {
            return {
                ruleForm: {
                    jobname: '',
                    jobpay: '',
                    jobaddress: '',
                    jobedu: '',
                    jobexpr: '',
                    jobcompany: '',
                    jobindustry:'',
                    jobdetail: '',
                },
                rules: {
                    jobname: [
                        {required: true, message: '请输入职位名称', trigger: 'blur'},
                    ],
                    jobpay: [
                        {required: true, message: '请输入薪资', trigger: 'blur'}
                    ],
                    jobaddress: [
                        {required: true, message: '请输入工作地址', trigger: 'blur'}
                    ],
                    jobedu: [
                        {required: true, message: '请输入学历', trigger: 'blur'}
                    ],
                    jobexpr: [
                        {required: true, message: '请输入工作经验', trigger: 'blur'}
                    ],
                    jobindustry: [
                        {required: true, message: '请输入行业名称', trigger: 'blur'}
                    ],
                    jobcompany: [
                        {required: true, message: '请输入公司名称', trigger: 'blur'}
                    ],
                    jobdetail: [
                        {required: true, message: '请输入职位描述', trigger: 'blur'},
                    ],
                },
                options1: [{
                    value: '不限',
                    label: '不限'
                }, {
                    value: '1k以下',
                    label: '1k以下'
                }, {
                    value: '2k-4k',
                    label: '2k-4k'
                }, {
                    value: '4k-6k',
                    label: '4k-6k'
                }, {
                    value: '6k-8k',
                    label: '6k-8k'
                }, {
                    value: '10k-15k',
                    label: '10k-15k'
                }, {
                    value: '15k以上',
                    label: '15k以上'
                }],
                value: '',

                options2: [{
                    label: '热门城市',
                    options2: [{
                        value: '上海',
                        label: '上海'
                    }, {
                        value: '北京',
                        label: '北京'
                    }]
                }, {
                    label: '城市名',
                    options2: [{
                        value: '成都',
                        label: '成都'
                    }, {
                        value: '深圳',
                        label: '深圳'
                    }, {
                        value: '广州',
                        label: '广州'
                    }, {
                        value: '大连',
                        label: '大连'
                    }]
                }],
                value2: '',

                options3: [{
                    value: '初中',
                    label: '初中'
                }, {
                    value: '高中',
                    label: '高中'
                }, {
                    value: '中技',
                    label: '中技'
                }, {
                    value: '大专',
                    label: '大专'
                }, {
                    value: '本科',
                    label: '本科',
                }, {
                    value: '硕士',
                    label: '硕士',
                }, {
                    value: '博士',
                    label: '博士',
                }, {
                    value: '博后',
                    label: '博后',
                }],
                value3: '',

                options4: [{
                    value: '1年',
                    label: '1年'
                }, {
                    value: '1年以下',
                    label: '1年以下'
                }, {
                    value: '1-3年',
                    label: '1-3年'
                }, {
                    value: '3-5年',
                    label: '3-5年'
                }, {
                    value: '5-10年',
                    label: '5-10年',
                }, {
                    value: '10年以上',
                    label: '10年以上',
                }],
                value4: '',

                options5: [{
                    value: 'IT/互联网',
                    label: 'IT/互联网',
                    children: [{
                        value: '计算机软件',
                        label: '计算机软件',
                    }, {
                        value: '网络游戏',
                        label: '网络游戏',
                    }]
                },{
                    value: '服务业',
                    label: '服务业',
                    children:[{
                        value:'酒店',
                        label:'酒店'
                    },{
                        value:'旅游',
                        label:'旅游'
                    }]
                }]
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var params= new URLSearchParams();
                        params.append('jobname',this.ruleForm.jobname,)
                        params.append('jobpay',this.ruleForm.jobpay,)
                        params.append('jobaddress',this.ruleForm.jobaddress,)
                        params.append('jobedu',this.ruleForm.jobedu,)
                        params.append('jobexpr',this.ruleForm.jobexpr,)
                        params.append('jobcompany',this.ruleForm.jobcompany,)
                        params.append('jobindustry',this.ruleForm.jobindustry,)
                        params.append('jobdetail',this.ruleForm.jobdetail,)
                        params.append('compid',this.$store.state.company)
                        this.axios.post('http://localhost:8001/compjob/add',params).then((res)=>{
                            // console.log(res.data.msg);
                            if(res.data.msg==='success'){
                                this.$message({
                                    showClose: true,
                                    message: '发布成功',
                                    type: 'success'
                                });
                                this.$router.push({ path:'/allposition'})
                            }
                            else {
                                this.$message({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        }).catch((err)=>{
                            console.log('error'+err);
                        })
                    } else {
                        // alert('err');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }

    }
</script>

<style scope>
    .jobpost {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
</style>
